<template>
  <layout title="noticeBar通知栏">
    <layout-content title="基础使用">
      <tn-notice-bar :data="noticeData" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" :circular="false" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" mode="vertical" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
    </layout-content>

    <layout-content title="暂停自动播放">
      <tn-notice-bar :data="noticeData" play-status="paused" :circular="false" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" play-status="paused" mode="vertical" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
    </layout-content>

    <layout-content title="调整播放速度">
      <tn-notice-bar :data="noticeData" speed="100" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" duration="5000" :circular="false" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" duration="1000" mode="vertical" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-notice-bar :data="noticeData" type="primary" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" type="success" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" type="warning" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" type="danger" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" type="info" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" bg-color="tn-bg-indigo--light" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" bg-color="tn-bg-indigo--light" color="tn-color-blue" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" bg-color="tn-cool-bg-6" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
    </layout-content>

    <layout-content title="设置左右图标">
      <tn-notice-bar :data="noticeData" type="primary" left-icon="notice" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" left-icon="notice" left-icon-color="tn-color-gray" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" type="primary" right-icon="close" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" right-icon="close" right-icon-color="tn-color-grey" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" left-icon="notice" right-icon="close" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
    </layout-content>

    <layout-content title="设置文字大小">
      <tn-notice-bar :data="noticeData" left-icon="notice" right-icon="close" font-size="32" :custom-style="noticeBarCustomStyle"></tn-notice-bar>
      <tn-notice-bar :data="noticeData" left-icon="notice" right-icon="close" font-size="32" left-icon-size="26" right-icon-size="26"  :custom-style="noticeBarCustomStyle"></tn-notice-bar>
    </layout-content>

  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnNoticeBar from '@/tuniao-ui/components/tn-notice-bar/src/NoticeBar.vue'

// noticeBar自定义样式
const noticeBarCustomStyle: CSSProperties = {
  marginTop: '20rpx'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 通知信息
const noticeData: string[] = [
  'TuniaoUI Vue3版本已经发布啦, 快来看看',
  'TuniaoUI 会员全新升级, 即将涨价, 想加入会员的快快入手了',
  '继续修bug'
]
</script>

<style lang="scss" scoped>
</style>
